import React from 'react';
import logo from './logo.svg';
import './login.css';
import axios from 'axios';
import {Form, Input, Button, Icon} from 'antd';
class loginForm extends React.Component {

  constructor(){
    super();
    this.state={
      data:'',
      loginState:''
      
    }
    // this.hostApi = 'http://39.105.164.227:3000'
    this.hostApi = 'http://127.0.0.1:3001';
  }
  

  //登录请求
  requestLogin = (e)=>{
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        axios.post(`${this.hostApi}/login`, {...values}, {
      withCredentials: false,
      headers: {
        "Content-Type": "application/json",
        "Access-Control-Allow-Origin" : "*",
        // "Content-Type": "application/x-www-form-urlencoded"
      },
      credentials: 'same-origin'
    }).then((res)=>{
      console.log("res:",res);
      this.setState({loginState:'成功登录服务端'});
      
    });
      }
    });
  }
  requestData = ()=>{
    // axios.post('http://39.105.164.227/test', {data:'hello'}, {
    let jsonObj = {data: 'I am test'}
    let jsonStr = JSON.stringify(jsonObj);
    axios.post(`${this.hostApi}/test`, jsonStr, {
      withCredentials: false,
      headers: {
        "Content-Type": "application/json",
        "Access-Control-Allow-Origin" : "*",
        // "Content-Type": "application/x-www-form-urlencoded"
      },
      credentials: 'same-origin'
    }).then((res)=>{
      let resData = res ? res.data : "服务端假数据0";
      this.setState({data:resData});
      setTimeout(() => console.log("resData", resData), 0);
    });
  }

  componentDidMount() {
    
  }

  render(){
    const {data,loginState} = this.state;
    const {getFieldDecorator} = this.props.form;
    return(
      <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <button
          onClick = {this.requestData}
        > 
          请求数据{data ? ": 收到返回 " + data : ""}
        </button>
        <Form onSubmit={this.requestLogin} className="login-form">
            <Form.Item>
              {getFieldDecorator('loginPhone', {
                rules: [{ required: true, message: '请输入登录账号!' }],
              })(
                <Input size="large" prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="请输入登录账号" />
              )}
            </Form.Item>
            <Form.Item>
              {getFieldDecorator('loginPassword', {
                rules: [{ required: true, message: '请输入您的密码!' }],
              })(
                <Input size="large" prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="请输入登录密码" />
              )}
            </Form.Item>
            {loginState&&<span>{loginState}</span>}
            <Form.Item>
              <Button type="primary" htmlType="submit" size="large" className="login-form-button">
                登录
              </Button>
            </Form.Item>
          </Form>
      </header>
    </div>
    )
  }
}

export default Form.create()(loginForm)
// ReactDOM.render(<App/>, document.getElementById('container'))


/**
 * 1. 部署到Linux
 * 2. Node服务端做请求路由分割(30分钟)
 * 3. 客户端做一个模拟登陆的页面效果(30分钟)
 * 4. 做一个非对称加密的登陆验证(30分钟)
 * 5. 做一下Session过期超时的机制(30分钟)
 * 附加题: 
 * 6. 思考如何实现Node的异步接口。
 * 7. 前端打包时, 将static变成index.html的相对路径
 * 8. Server端监听的地址和端口应配置到配置文件中
 */